import { Vue, Component, Watch } from 'vue-property-decorator'
import { TopNav } from '@/components/index'
import { cloneDeep } from 'lodash'
@Component({
    components: {
        TopNav
    }
})
export default class personalInformation extends Vue {
    private linkguid = window.CUSTOMP.linkguid
    private currentRate: number = 20

    private formData1=[]
    private formData = {
        call: {
            type:'select',
            label:'* 称谓',
            placeholder:'选择称谓',
            value: '',
            data: ['先生', '女士', '小姐'],
            showPicker: false,
            rules:[{ required: true, message: '请选择称谓' }],
            // onCall:(v:any)=>{
            //     this.formData.call.value = v
            //     this.formData.call.showPicker = false;
            // }
        },
        name:{
            label:'* 姓名',
            placeholder:'输入姓名',
            value: '',  
            readonly:false,
            rules:[{ required: true, message: '请输入姓名' }]
        },
        phone:{
            label:'* 手机',
            placeholder:'输入手机号码',
            value: '',  
            type:'tel',
            maxLengh:11,
            readonly:false,
            rules:[{ required: true, message: '请输入手机号码' }]
        },
        iDCardName:{
            label:'* 身份证姓名',
            placeholder:'输入身份证姓名',
            value: '',  
            rules:[{ required: true, message: '请输入身份证姓名' }]
        },
        iDCardNumber:{
            label:'* 身份证号码',
            placeholder:'输入身份证号码',
            value: '', 
            type:'tel',
            rules:[{ required: true, message: '请输入身份证号码' }]
        },
        company:{
            label:'* 公司',
            placeholder:'输入公司名称',
            value: '',  
            rules:[{ required: true, message: '请输入公司名称' }]
        },
        department:{
            label:'* 部门',
            placeholder:'输入部门',
            value: '',  
            rules:[{ required: true, message: '请输入部门' }]
        },
        position:{
            label:'* 职位',
            placeholder:'输入职位',
            value: '',  
            rules:[{ required: true, message: '请输入职位' }]
        },
        country:{
            type:'select',
            label:'* 国家/地区',
            placeholder:'选择国家/地区',
            value:'',
            data: ['中国', '美国', '澳大利亚'],
            rules:[{ required: true, message: '请选择国家/地区' }],
            showPicker:false,
            // onCall:(v:any)=>{
            //     this.formData.country.value = v
            //     this.formData.country.showPicker = false;
            // }
        },
        province:{
            type:'select',
            label:'* 省份/地区',
            placeholder:'选择省份/地区',
            value:'',
            data: ['上海', '北京', '南京'],
            rules:[{ required: true, message: '请选择国家/地区' }],
            showPicker:false,
            // onCall:(v:any)=>{
            //     this.formData.province.value = v
            //     this.formData.province.showPicker = false;
            // }
        },
        city:{
            label:'* 城市',
            placeholder:'输入城市',
            value: '',  
            rules:[{ required: true, message: '请输入城市' }]
        },
        address:{
            label:'* 详细地址',
            placeholder:'输入详细地址',
            value: '',  
            rules:[{ required: true,pattern:/.{8}/, message: (v:string)=>{
                if(v.length>0){
                    return '请输入8个字以上'
                }
                return '请输入详细地址'
            } }]
        },
        email:{
            label:'* 电子邮箱',
            placeholder:'输入电子邮箱',
            value: '',  
            rules:[{ required: true,pattern:/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, message: (v:string)=>{
                if(v.length>0){
                    return '请输入正确的邮箱'
                }
                return '请输入电子邮箱'
            } }]
        },
        checked:false,
        protocolShow:false
    }
    @Watch('formData1')
    onformData1(v:any){
        console.log(v)
    }
    created(){
        this.getVisitorInfo().then(e=>{
            this.getListData(e)
        })
      
        this.addOnCall()
    }
    getListData(visitor:any){
        this.$axios({
            method:'post',
            url:'/reg/IscRegister/formmarking/GetComponentsByPagetype',
            data:{
                linkguid:this.linkguid,
                pagetype:'personal'
            }
        }).then((e:any)=>{
            console.log(e.list.list)
            e.list.list.map((item:any)=>{
                if(item.type==='select'){
                    item.showPicker= false
                }else if(item.options.model=='Surname'){
                    item.options.defaultValue=visitor.Surname
                }else if(item.options.model=='Mobile'){
                    item.options.defaultValue=visitor.Mobile
                }else if(item.name=='邮箱'){
                    item.rules[0].pattern=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
                    item.rules[0].message = (v:string)=>{
                        if(v.length>0){
                            return '请输入正确的邮箱'
                        }
                        return '请输入电子邮箱'
                    }
                }
            })
           
            this.formData1=e.list.list
   
        })
    }
    getVisitorInfo(){
      return new Promise((resolve,reject)=>{
        this.$axios({
            method:'post',
            url:'/reg/IscRegister/formmarking/GetVisitorInfo',
            data:{
                linkguid:this.linkguid,
                cd:this.$route.query.cd
            }
        }).then((e:any)=>{
            console.log(e)
            resolve(e.visitor)
        })
      })
      
    }
    formatData(){ 

        
    }
    addOnCall(){
        //添加回调

        for(let i in this.formData){
            if(this.formData[i].type==='select'){
                
                this.formData[i].onCall=(v:any)=>{
                    this.formData[i].value = v
                    this.formData[i].showPicker = false;
                }
            }
        }
    }

    goNext(){
        let data= {}
        for(let item in this.formData){
            if(typeof(this.formData[item])=='object'){
                data[item]=this.formData[item].value
            }
        }
        console.log(data)
        this.$refs.form.validate().then((e:any)=>{
            console.log(e)
            if(!this.formData.checked){
                this.$toast('请同意协议')
                return
            }
            this.$router.push('/questionnaire')
        }).catch((e:any)=>{
          //  console.log(e)
        })
    }

}